<template>
    <div class="sjzxLeftThemePicFxff">
        <Title :titles="$store.state.fxffThematicMapCheckedContent.type" />
        <el-tabs v-model="activeName" @tab-click="handleTabClick">
            <el-tab-pane
                v-for="(item, index) in tabsList"
                :key="item"
                :name="item"
                :label="item"
            >
                <div :id="'themePicFxffChart' + index"></div>
            </el-tab-pane>
        </el-tabs>
        <el-row>
            <el-col :span="8" v-if="$store.state.userRegion=='海南省'">
                <el-select v-model="cityValue" placeholder="请选择市县">
                    <el-option
                        v-for="item in cityOptions"
                        :key="item"
                        :label="item"
                        :value="item"
                    >
                    </el-option>
                </el-select>
            </el-col>
            <el-col :span="12">
                <el-input placeholder="请输入名称，地址" v-model="inputVal">
                </el-input>
            </el-col>
            <el-col :span="4">
                <el-button icon="el-icon-search" @click="zySearch"></el-button>
            </el-col>
        </el-row>

        <div class="resultNum">查询结果：共{{ totalNum }}条记录</div>
        <div class="dataList">
            <div
                class="dataListItem"
                v-for="(item, index) in dataList"
                :key="item"
            >
                <div class="itemTop">
                    <span class="order">{{ orderList[index] + 1 }}、</span>
                    <span class="itemName">{{ item.name }}</span>
                </div>
                <div class="link">
                    <span class="linkPro">联系人：</span>
                    <span class="linkContent"
                        >{{ item.charge }}  联系电话：{{ item.phone }}</span
                    >
                </div>
                <div class="itemBottom">
                    <span class="location">地址：{{ item.address }}</span>
                    <span  @click="flyTo(item)" v-if="item.sfkx=='是'"
                        class="locationIcon el-icon-location-information"
                    ></span>
                    <span
                        class="showQJ"
                        v-if="item.qjt"
                        @click="showQJ(item.qjt)"
                        >查看全景</span
                    >
                </div>
            </div>
        </div>
        <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            layout="prev, pager, next"
            :pager-count="5"
            :total="totalNum"
        >
        </el-pagination>
        <div class="exportExcel" @click="exportExcel">报表生成</div>
    </div>
</template>

<script>
import { computed, nextTick, onMounted, ref, watch } from "vue";
import { useStore } from "vuex";
import Title from "../../../sjzxLeft/LittleTitle.vue";
import echarts from "echarts";
import axios from "axios";

export default {
    components: {
        Title,
    },
    setup() {
        let inputVal = ref("");
        let currentPage = ref(1);
        let store = useStore();
        let activeName = ref("second");
        let totalNum = ref(0);
        let tabsList = ref([]);
        let echartsUrl = ref([]);
        let dataList = ref([]);
        //搜索地址
        let searchUrl = ref("");
        //每一页序号
        let orderList = ref([]);
        //报表导出列表
        let exportUrl = ref("");
        //下拉框
        let cityValue = ref("");
        let isAll = ref(false)
        let cityOptions = ref([]);
        //监听当前行政区划
        const userRegion = computed(() => {
            return store.state.userRegion;
        });
        
        if (userRegion.value == "海南省") {
        } else {
            cityValue.value = userRegion.value;
        }
        //tab切换时，渲染echarts
        const handleTabClick = (tab) => {
            let index = tab.index;
            axios.get(`${sjzxUrl}${echartsUrl.value[index]}`).then((res) => {
                let vData = res.data.data;
                let xData = vData.map((item) => {
                    return item.name;
                });
                let yData = vData.map((item) => {
                    return item.count;
                });
                drawChart("themePicFxffChart" + index, xData, yData);
            });
        };
        //默认执行一次监听，渲染echarts 以及列表
        watch(
            () => store.state.fxffThematicMapCheckedContent,
            (newValue) => {
                console.log(newValue);
                //tab切换列表
                tabsList.value = newValue.echarts;
                //echarts数据 地址 列表
                echartsUrl.value = JSON.parse(newValue.item.kbApiDistribution);
                //tab页默认显示第一个列表
                activeName.value = newValue.echarts[0];
                //获取报表输出url
                exportUrl.value = newValue.item.kbApiDownload;
                //请求第一个echarts数据，即市县数据
                axios.get(`${sjzxUrl}${echartsUrl.value[0]}`).then((res) => {
                    let vData = res.data.data;
                    let xData = vData.map((item) => {
                        return item.name;
                    });
                    let yData = vData.map((item) => {
                        return item.count;
                    });
                    nextTick(() => {
                        drawChart("themePicFxffChart0", xData, yData);
                    });
                });
                searchUrl.value = newValue.item.kbApiCondition;
                //默认搜索全部数据 
                let listUrl = `${sjzxUrl}${searchUrl.value}?current=1&size=10&division=${cityValue.value}&condition=${inputVal.value}`
                if (userRegion.value == "海南省") {
                    
                } else {
                    listUrl = `${sjzxUrl}${searchUrl.value}?current=1&size=10&addvcd=${window.regionCode[userRegion.value]}&condition=${inputVal.value}`
                }
                axios
                    .get(listUrl)
                    .then((res) => {
                        console.log(res.data);
                        totalNum.value = res.data.data.total;
                        console.log(res.data.data.total);
                        dataList.value = res.data.data.records;
                        orderList.value = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
                    });
            
                axios
                    .get(
                        `${sjzxUrl}/api/v2/sanFang/getAdministrativeDivision?sign=${
                            newValue.item.kbId
                        }`
                    )
                    .then((res) => {
                        cityOptions.value = res.data.data;
                        cityOptions.value.unshift("全部");
                    });
            },
            { immediate: true }
        );
        const flyTo = (point) => {
            if(point.sfkx=="是"){
                let x = null
                let y = null
                if (point.lon && point.lat) {
                    x = point.lon
                    y = point.lat
                    viewer.camera.flyTo({
                        destination: Cesium.Cartesian3.fromDegrees(
                            parseFloat(x),
                            parseFloat(y),
                            8000
                        ),
                    });
                } else if (point.lng && point.lat) {
                    x = point.lng
                    y = point.lat
                    viewer.camera.flyTo({
                        destination: Cesium.Cartesian3.fromDegrees(
                            parseFloat(x),
                            parseFloat(y),
                            8000
                        ),
                    });
                } else if (point.jd && point.wd) {
                    x = point.jd
                    y = point.wd
                    viewer.camera.flyTo({
                        destination: Cesium.Cartesian3.fromDegrees(
                            parseFloat(x),
                            parseFloat(y),
                            8000
                        ),
                    });
                }
            }else{
                return
            }
            
            
        };
        const drawChart = (element, xData, yData) => {
            let dom = document.getElementById(element);
            let myChart = echarts.init(dom);
            let option = {
                animation: false,
                grid: {
                    left: "15%",
                    right: "0%",
                    top: "17%",
                    bottom: "50%",
                },
                tooltip: {
                    trigger: "axis",
                },
                xAxis: {
                    data: xData,
                    axisLine: {
                        lineStyle: {
                            color: "#3d5269",
                        },
                    },
                    axisLabel: {
                        color: "#fff",
                        fontSize: 12,
                        rotate: 45,
                    },
                },
                yAxis: {
                    name: "单位:个",
                    nameTextStyle: {
                        color: "#fff",
                        fontSize: 14,
                    },
                    axisLine: {
                        lineStyle: {
                            color: "#3d5269",
                        },
                    },
                    axisLabel: {
                        color: "#fff",
                        fontSize: 12,
                    },
                    splitLine: {
                        show: false,
                        lineStyle: {
                            color: "#2d3d53",
                        },
                    },
                    //interval:1000,
                },
                series: [
                    {
                        type: "bar",
                        barWidth: 10,
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(
                                    0,
                                    0,
                                    0,
                                    1,
                                    [
                                        {
                                            offset: 0,
                                            color: "#5ef3ff",
                                        },
                                        {
                                            offset: 1,
                                            color: "#06a4f4",
                                        },
                                    ],
                                    false
                                ),
                            },
                        },
                        label: {
                            normal: {
                                show: true,
                                fontSize: 14,
                                fontWeight: "bold",
                                color: "#ffffff",
                                position: "top",
                            },
                        },
                        data: yData,
                    },
                ],
            };
            myChart.setOption(option);
            window.addEventListener("resize", () => {
                myChart.resize();
            });
        };
        //生成连续数字
        const progressiveArray = (start, end) => {
            start = Number(start);
            end = Number(end);
            end = end > start ? end : start;
            return [...Array(end + 1).keys()].slice(start);
        };
        //点击各个页码的方法
        let pageSize = 10;
        const handleCurrentChange = (currentPage) => {
            let from = (currentPage - 1) * pageSize;
            let to = currentPage * pageSize;
            axios
                .get(
                    `${sjzxUrl}${
                        searchUrl.value
                    }?current=${currentPage}&size=10&division=${
                        cityValue.value == "全部" ? "" : cityValue.value
                    }&condition=${inputVal.value}`
                )
                .then((res) => {
                    totalNum.value = res.data.data.total;
                    dataList.value = res.data.data.records;
                    orderList.value = progressiveArray(from, to);
                 
                });
        };
        //搜索按钮
        const zySearch = () => {
            axios
                .get(
                    `${sjzxUrl}${searchUrl.value}?current=1&size=10&division=${
                        cityValue.value == "全部" ? "" : cityValue.value
                    }&condition=${inputVal.value}`
                )
                .then((res) => {
                    totalNum.value = res.data.data.total;
                    dataList.value = res.data.data.records;
                    orderList.value = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
                });
        };
        const handleSizeChange = (size) => {};
        const exportExcel = () => {
            window.open(
                `${sjzxUrl}${exportUrl.value}?division=${
                    cityValue.value == "全部" ? "" : cityValue.value
                }&condition=${inputVal.value}`
            );
        };
        const showQJ = (qjt) => {
            store.commit("changePsvUrl", `/qj/panoramagram/${qjt}`);
            //store.commit("changePsvUrl",`https://59.212.147.69:8889/panoramagram/${qjt}`)
        };
        onMounted(() => {});
        return {
            //下拉框
            cityValue,
            cityOptions,
            //搜索框
            inputVal,
            //页数变化，翻页
            totalNum,
            orderList,
            currentPage,
            handleSizeChange,
            handleCurrentChange,
            //数据列表
            dataList,
            //导出报表方法
            exportExcel,
            //tab切换
            activeName,
            handleTabClick,
            tabsList,
            zySearch,
            flyTo,
            //显示全景按钮
            showQJ,
            //
            isAll
        };
    },
};
</script>
<style scoped>
.dataList::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
}
.dataList::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #535353;
}
.dataList::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.5);
}
</style>
<style>
.sjzxLeftThemePicFxff .el-pagination .btn-next .el-icon,
.el-pagination .btn-prev .el-icon {
    color: #000;
}
.el-select-dropdown__list span {
    color: #000;
}
</style>
<style lang="stylus" >
 ;

.sjzxLeftThemePicFxff {
    padding: vh(15) vw(15);
    color: #fff;

    .el-button {
        background: transparent;
        border: 1px solid #00EAFF;
        color: #fff;
    }

    .el-tabs__header {
        width: vw(370);
        margin: 0 0 vh(18);
        margin-top: vh(18);
        z-index: 19;

        .el-tabs__nav-wrap {
            height: vh(30);
            line-height: vh(30);
            // min-width: vw1(2000);
            background: rgba(4, 34, 45, 0.37);

            .el-tabs__nav-prev, .el-tabs__nav-next {
                line-height: vh(30);
                color: #fff;
                font-size: vw(16);
            }

            .el-tabs__item {
                height: vh(30);
                min-width: vw(170);
                color: #fff;
                line-height: vh(30);
                font-size: vw(16);
                text-align: center;
            }

            .el-tabs__item.is-active {
            }

            .el-tabs__active-bar {
                width: vw(10);
                background-color: #26cffe;
            }

            &::after {
                visibility: hidden;
                // background-color: none;
            }
        }
    }

    .el-tabs__content {
        z-index: 19;
        position: relative;
        width: vw(350);
        height: vh(230);

        .button-box {
            position: absolute;
            right: 0;
            top: vh(10);

            span {
                width: vw(40);
                background: #023245;
                display: inline-block;
                height: vw(40);
                line-height: vh(40);
                text-align: center;
                margin-right: vw(20);
                font-size: vw(30);
                color: #5cecff;
                cursor: pointer;
                border-radius: vw(6);
                pointer-events: all;
            }
        }

        img {
            width: 100%;
            height: 100%;
        }
    }

    .resultNum {
        margin-top: vh(10);
        margin-bottom: vh(10);
    }

    .exportExcel {
        width: vw(100);
        height: vh(30);
        line-height: vh(30);
        border: 1px solid #00EAFF;
        text-align: center;
        border-radius: 3px;
        float: right;
        margin-top: vh(30);
        cursor: pointer;
    }

    .exportExcel:hover {
        background: #00E5FD;
        color: #000;
    }

    .el-input__inner {
        background: transparent;
        border: 1px solid #00E5FD;
        height:38px;
    }

    .el-input-group__append, .el-input-group__prepend {
        background: transparent;
        border: 1px solid #00E5FD;
    }

    #themePicFxffChart0 {
        width: vw(330);
        height: vh(250);
    }

    #themePicFxffChart1 {
        width: vw(330);
        height: vh(220);
    }

    #themePicFxffChart2 {
        width: vw(330);
        height: vh(220);
    }

    .dataList {
        height: vh(400);
        overflow-y: scroll;
        margin-bottom: vh(20);

        .dataListItem {
            padding-bottom: vh(10);
            padding-left: vw(10);
            padding-right: vw(10);
            padding-top: vh(10);
            border-bottom: 1px dashed #ddd;

            .itemTop {
                .order {
                    display: inline-block;
                    min-width: vw(20);
                    height: vh(20);
                    padding-left: vw(10);
                    padding-right: vw(10);
                    margin-right: vw(10);
                    text-align: center;
                    background: #00EAFF;
                    font-size: vw(16);
                    line-height: vh(20);
                    color: #000;
                }

                .itemName {
                    font-size: vw(16);
                    height: vh(20);
                    line-height: vh(20);
                }
            }

            .link {
                text-indent: vw(20);
                height: vh(30);
                line-height: vh(30);

                .linkPro {
                    font-size: vw(14);
                }

                .linkContent {
                    font-size: vw(14);
                }
            }

            .itemBottom {
                cursor: pointer;
                text-align: right;
                height: vh(20);
                .locationIcon {
                    color: #00EAFF;
                    font-size: vw(14);
                    height: vh(20);
                    line-height: vh(18);
                }
                .location {
                    font-size: vw(14);
                    height: vh(20);
                    line-height: vh(18);
                    text-indent:vw(20);
                    float:left;
                }
                .showQJ {
                    margin-left: vw(20);
                    cursor: pointer;
                }
            }
        }
    }
}
</style>